import 'package:flutter/material.dart';
import 'package:voice_flip_clock/theme/app_theme.dart';

class FlipDigit extends StatelessWidget {
  final String value;

  const FlipDigit({
    super.key,
    required this.value,
  });

  @override
  Widget build(BuildContext context) {
    // 获取屏幕尺寸
    final screenSize = MediaQuery.of(context).size;
    // 计算卡片宽度为屏幕宽度的14%
    final cardWidth = screenSize.width * 0.14;
    // 计算卡片总高度为屏幕高度的50%
    final totalHeight = screenSize.height * 0.5;
    // 单个卡片高度为总高度的一半
    final cardHeight = totalHeight / 2;

    // 根据卡片大小计算合适的字体大小
    final fontSize = cardWidth * 1.1; // 字体大小略大于卡片宽度

    // 调整文本样式
    final textStyle = TextStyle(
      color: AppTheme.digitColor,
      fontSize: fontSize,
      fontWeight: FontWeight.bold,
      height: 1.2,
    );

    return Container(
      width: cardWidth,
      height: totalHeight,
      decoration: BoxDecoration(
        color: AppTheme.backgroundColor,
        borderRadius: BorderRadius.circular(cardWidth * 0.1), // 圆角为宽度的10%
      ),
      child: Stack(
        children: [
          // 上半部分卡片
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            height: cardHeight-1,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.grey[800],
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(cardWidth * 0.1),
                  topRight: Radius.circular(cardWidth * 0.1),
                ),
              ),
              child: CustomPaint(
                size: Size(cardWidth, totalHeight),
                painter: DigitPainter(
                  digit: value,
                  textStyle: textStyle,
                  isUpperHalf: true,
                ),
              ),
            ),
          ),
          // 下半部分卡片
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            height: cardHeight-1,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.grey[800],
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(cardWidth * 0.1),
                  bottomRight: Radius.circular(cardWidth * 0.1),
                ),
              ),
              child: ClipRect(
                child: CustomPaint(
                  size: Size(cardWidth, totalHeight),
                  painter: DigitPainter(
                    digit: value,
                    textStyle: textStyle,
                    isUpperHalf: false,
                  ),
                ),
              ),
            ),
          ),
          // 分割线
          Positioned(
            top: cardHeight - 1, // 分割线位置
            left: 0,
            right: 0,
            child: Container(
              height: 2,
              color: AppTheme.backgroundColor,
            ),
          ),
        ],
      ),
    );
  }
}

class DigitPainter extends CustomPainter {
  final String digit;
  final TextStyle textStyle;
  final bool isUpperHalf;

  DigitPainter({
    required this.digit,
    required this.textStyle,
    required this.isUpperHalf,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final textPainter = TextPainter(
      text: TextSpan(text: digit, style: textStyle),
      textDirection: TextDirection.ltr,
      textAlign: TextAlign.center,
    );

    textPainter.layout(
      minWidth: size.width,
      maxWidth: size.width,
    );

    // 计算垂直位置
    if (isUpperHalf) {
      // 上半部分：将数字底部对齐到卡片底部
      final yPosition = size.height - (textPainter.height / 2);
      canvas.save();
      canvas.clipRect(Rect.fromLTRB(0, 0, size.width, size.height));
      textPainter.paint(canvas, Offset(0, yPosition));
      canvas.restore();
    } else {
      // 下半部分：将数字顶部对齐到卡片顶部
      final yPosition = -(textPainter.height / 2);
      canvas.save();
      canvas.clipRect(Rect.fromLTRB(0, 0, size.width, size.height));
      textPainter.paint(canvas, Offset(0, yPosition));
      canvas.restore();
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
} 